<template>
    <div class="followImg">
        <div :id="clipboardId" class="clipboard" :style="bodyStyle" :ref='`paste${clipboardId}`' type='text' v-viewer
            placeholder='ctrl+v粘贴到此处' contenteditable='false' @paste.stop.prevent='pasteImg($event)'>
        </div>
        <div v-show="isClip && isShowDelete" class="del-btn" @click="clear">
            <i class="el-icon-delete" style="color: #fff;font-size: 18px"></i>
        </div>
        <slot></slot>
    </div>
</template>
  
<script>
export default {
    name: 'FollowUploadImage',
    props: {
        bodyStyle: {
            type: Object, default: () => {
                return {
                    width: '100%',
                    height: '392px'
                }
            }
        },

        placeholderImg: { type: String, default: null },
        isShowDelete: { type: Boolean, default: true }
    },
    data() {
        return {
            files: [],
            isClip: false,
            clipboardId: 'clipboard' + Math.random(),
            imageList:[]
        }
    },
    computed: {

    },
    mounted() {
        this.refreshHolderImg()
    },
    methods: {
        refreshHolderImg() {
            if (!!this.placeholderImg && this.placeholderImg.length > 0) {
                this.isClip = true
                // 显示图片
                const image = new Image()
                image.src = this.placeholderImg
                let elem = document.getElementById(this.clipboardId);
                if (!elem) {
                    return
                }
                let imgConHeight = elem.offsetHeight;
                let imgConWidth = elem.offsetWidth;

                image.height = imgConHeight
                image.width = imgConWidth

                this.$refs[`paste${this.clipboardId}`].appendChild(image)
            }
        },
        pasteImg(e) {
            const cbd = e.clipboardData
            if (!(cbd && cbd.items)) {
                return
            }
            for (let i = 0; i < cbd.items.length; i++) {
                const item = cbd.items[i]
                // 如果内容是文件，则显示
                if (item.kind === 'file') {
                    // 获取剪切板的文件
                    const blob = item.getAsFile()
                    this.imageList.push(blob)
                    if (blob.size === 0) {
                        return
                    }
                    this.files.push(blob)
                    this.isClip = true
                    // 显示图片
                    const image = new Image()
                    image.file = blob
                    const reader = new FileReader()
                    reader.onload = (aImg => {
                        return e => {
                            aImg.src = e.target.result
                        }
                    })(image)

                    reader.readAsDataURL(blob)

                    let elem = document.getElementById(this.clipboardId);
                    let imgConHeight = elem.offsetHeight;
                    let imgConWidth = elem.offsetWidth;

                    image.height = imgConHeight
                    image.width = imgConWidth

                    this.$refs[`paste${this.clipboardId}`].appendChild(image)
                    // 只取一张图片
                    break
                } else {
                    continue
                }
            }
        },
        clear() {
            this.imageList = []
            this.files = []
            const element = document.getElementById(this.clipboardId)
            if (element) {
                while (element.firstChild) {
                    if (element.firstChild) {
                        element.removeChild(element.firstChild)
                    }
                }
            }
            this.isClip = false
        }
    },
}
</script>
  
<style scoped>
.followImg {
    background-color: #fff;
    border: #BFBFBF solid 1px;
    border-radius: 5px;
    position: relative;


}

.del-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: rgba(0, 0, 0, .45);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.clipboard {
    border-radius: 4px;
    overflow: auto;
    cursor: pointer;
    /* 这是设置div背景图片 如果有需要可放开*/
    /*   background: url('../../assets/task/distribution/clipboardAdd.png') no-repeat center 40%;  */
    background-size: 80px;
}

.clipboard:empty:before {
    content: attr(placeholder);
    color: #BFBFBF;
    font-size: 14px;
    position: absolute;
    top: 70%;
    font-size: 12px;
    /*left:50%;*/
    /*margin-left:-20%;*/
}
</style>
  
  